<template>
  <div>
    <div
        style="width: 1670px;min-height:770px;padding:24px 32px;margin:15px 0 15px 35px;
        border-radius: 26px;background-color: white">
      <div v-if="contentShow">
        <p style="margin: 0;font-size: 18px">课件</p>
        <el-collapse v-model="activeNames" @change="handleChange" style="margin-top: 20px">
          <el-collapse-item v-for="(item,index) in chapterList" :title="item.chapterName" :name="index">
            <div v-for="(it,ind) in lessonList" v-if="it.chapterId===item.chapterId"
                 style="margin: 20px 0 30px 30px" :id="'lesson'+index+'-'+ind">
              <el-link :href="'/#/learn/content/'+item.courseId+'/'+item.chapterId+'/'+it.lessonId"
                       style="font-size: 16px;" :underline="false">
                <div style="display: flex">
                <a v-if="it.complete" class="el-icon-circle-check" style="border-radius: 50%;
                background-color: #409EFF;color: white;font-size: 24px;height: 24px;width: 24px"></a>
                <a v-else class="el-icon-remove-outline" style="font-size: 24px;"></a>
                <div style="margin: 4px 0 0 8px">{{ it.lessonName }}</div>
                </div>
              </el-link>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-if="!contentShow">
        <p style="margin: 0;font-size: 18px">
          <el-form style="display: flex;">
            <a style="margin-top: 6px">课件</a>
            <i class="el-icon-arrow-right" style="margin: 10px"></i>
            <el-form-item style="width: 150px">
              <el-select v-model="chapterId" placeholder="请选择章节">
                <el-option @click.native="onClickChapter" v-for="(item,index) in chapterList"
                           :key="item.chapterId" :label="item.chapterName" :value="item.chapterId"></el-option>
              </el-select>
            </el-form-item>
            <i class="el-icon-arrow-right" style="margin: 10px"></i>
            <el-form-item style="width: 150px">
              <el-select v-model="lessonId" placeholder="请选择课时">
                <el-option @click.native="onClickLesson()" v-for="(item,index) in lessonList" v-if="item.chapterId===chapterId"
                           :key="item.lessonId" :label="item.lessonName" :value="item.lessonId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </p>
        <div v-html="this.lesson.content" style="margin-left: 40px;width: 1200px">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ContentView",
  data() {
    return {
      activeNames: ['1'],
      courseId: '',
      chapterList: [],
      lessonList: [],
      contentShow: false,
      chapterId:'',
      lessonId:'',
      lesson:'',
    }
  },
  methods: {
    getChapterByCourseId(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/chapter/selectChapterByCourseId/${courseId}`
      }).then(res => {
        this.chapterList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    getLessonByCourseId(courseId) {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/lesson/selectLessonByCourseId/${courseId}/${localStorage.getItem("userId")}`
      }).then(res => {
        this.lessonList = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    getLessonById(lessonId){
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/lesson/selectLesson/${lessonId}`
      }).then(res => {
        if(res.data.code===200)
          this.lesson = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    addLessonSituation(lessonId){
      this.$axios({
        method: 'post',
        url: "http://localhost:8089/lessonsituation/createLessonsituation",
        data:{"lessonId":lessonId,"userId":localStorage.getItem("userId")}
      }).then(res => {
        if(res.data.code===200)
          this.lesson = res.data.dataobject;
      }).catch(err => console.log(err));
    },
    updateAttendCourse(chapterId,lessonId){
      this.$axios({
        method: 'post',
        url: "http://localhost:8089/user/attendCourse/updateAttendCourse",
        data:{"courseId":this.courseId,"userId":localStorage.getItem("userId"),"chapterId":chapterId,"lessonId":lessonId}
      }).then(res => {
      }).catch(err => console.log(err));
    },
    handleChange(val) {
      console.log(val);
    },
    onClickChapter(){
      this.lessonId="";
    },
    onClickLesson(){
      this.$router.push({
        path: '/learn/content/'+this.courseId+'/'+this.chapterId+'/'+this.lessonId
      }).catch(err=>console.log(err));
    }
  },
  created() {
    this.courseId = parseInt(this.$route.params.courseId);
    this.chapterId = parseInt(this.$route.params.chapterId);
    this.lessonId=parseInt(this.$route.params.lessonId);
    if (!this.chapterId){
      this.contentShow = true;
    }
    else {
      this.getLessonById(this.lessonId);
      this.addLessonSituation(this.lessonId);
      this.updateAttendCourse(this.chapterId,this.lessonId)
    }
    this.getChapterByCourseId(this.courseId);
    this.getLessonByCourseId(this.courseId);
  }
}
</script>

<style scoped>

/deep/ .el-collapse-item__header {
  color: #333333;
  font-size: 16px;
  margin-top: 15px;
  border-radius: 10px;
  padding: 5px 20px;
  background-color: #F7F7F7 !important;
  position: relative;
}

/deep/ .el-collapse-item__content {
  text-align: left;
//color: #fff ; //background-color: #313743; padding-bottom: 0;
  div {
    height: .96rem;
    line-height: .96rem;
  }
}
</style>